<template>
	<view class="container">
		<!-- 左上角队徽 -->
		<view class="logo-container">
			<image src="../../static/teamEmblem1.png" class="team-logo"></image>
		</view>

		<!-- 上方欢迎文字 -->
		<view class="welcome-text">
			<span class="special-text">欢迎访问锦绣云章数据库！</span>
		</view>

		<!-- 中下方输入框和提示 -->
		<view class="input-container">
			<!-- 用户名输入 -->
			<view class="input-row">
				<view class="input-label">用户名：</view>
				<input type="text" v-model="username" class="text-input" placeholder="请输入用户名" />
			</view>

			<!-- 密码输入 -->
			<view class="input-row">
				<view class="input-label">密码：</view>
				<input :type="passwordVisible ? 'text' : 'password'" v-model="password" class="text-input"
					placeholder="请输入密码" />
				<!-- 			<view class="input-right" @click="togglePasswordVisibility">
				{{ passwordVisible ? '隐藏' : '显示' }}
			</view> -->
			</view>

			<!-- 注册链接 -->
			<view class="register-link" @click="goToRegister">
				没有账号？前去注册
			</view>

			<view class="hint-text">遇见bug群里找泽川喵</view>
		</view>
	</view>
</template>

<script setup>
	const uniIdCo = uniCloud.importObject("uni-id-co", {
		errorOptions: {
			type: 'toast'
		}
	})
	import {
		ref
	} from "vue";
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app"
	onLoad(() => {
		document.title = '指绣云章数据库';
	})
	onShow(() => {
		// #ifdef H5
		document.onkeydown = event => {
			var e = event || window.event;
			if (e && e.keyCode == 13) {
				//回车键的键值为13
				pwdLogin()
			}
		};
		// #endif
	})
	const username = ref("")
	const password = ref("")
	const passwordVisible = ref(false)

	// 切换密码可见性
	function togglePasswordVisibility() {
		passwordVisible.value = !passwordVisible.value
	}

	async function pwdLogin() {
		await uniIdCo.login({
				username: username.value,
				password: password.value
			})
			.then((res) => {
				console.log(res);
				// 登录成功后跳转到主页
				if (res.errCode == 0) {
					// console.log("yes");
					uni.reLaunch({
						url: "/pages/index/index"
					})
				}
			})

	}

	// 跳转到注册页面
	function goToRegister() {
		uni.navigateTo({
			url: '/pages/register/register'
		})
	}
</script>

<style>
	/* 导入特殊字体 - 这里需要用户提供字体文件路径 */
	@font-face {
		font-family: 'BoutiqueBitmap9x9_3D';
		/* 这里假设字体文件放在static目录下 */
		src: url("../../static/font/BoutiqueBitmap9x9_3D.woff"),
			url("../../static/font/BoutiqueBitmap9x9_3D.woff2")
	}

	@font-face {
		font-family: 'BoutiqueBitmap9x9_19_R';
		/* 这里假设字体文件放在static目录下 */
		src: url("../../static/font/BoutiqueBitmap9x9_19_R.woff"),
			url("../../static/font/BoutiqueBitmap9x9_19_R.woff2")
	}

	.container {
		/* 设置容器为全屏 */
		width: 100%;
		height: 100vh;
		/* 设置背景图片 */
		background-image: url('../../static/background.jpg');
		/* 背景图片居中 */
		background-position: center center;
		/* 背景图片不重复 */
		background-repeat: no-repeat;
		/* 背景图片固定，不随页面滚动或缩放改变 */
		background-attachment: fixed;
		/* 背景图片覆盖整个容器 */
		background-size: cover;
		/* 确保容器内的内容不会被背景影响 */
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		padding: 20px;
		box-sizing: border-box;
	}

	/* 左上角队徽 */
	.logo-container {
		position: absolute;
		left: 20px;
		top: 20px;
	}

	.team-logo {
		width: 250px;
		height: 250px;
		border-radius: 10px;
	}

	/* 欢迎文字 */
	.welcome-text {
		margin-top: 35px;
	}

	.special-text {
		font-family: 'BoutiqueBitmap9x9_3D', 'Microsoft YaHei', sans-serif;
		font-size: 80px;
		color: #006080;
		/* font-weight: bold; */
		/* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); */
	}

	/* 输入框容器 */
	.input-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 100px;
		width: 90%;
		max-width: 1000px;
	}

	/* 水平排列的输入行 */
	.input-row {
		margin-top: 10px;
		background-color: rgba(255, 255, 255, 0.85);
		display: flex;
		align-items: center;
		width: 100%;
		gap: 10px;
	}

	.input-label {
		margin-left: 18px;
		font-family: "BoutiqueBitmap9x9_19_R", 'Microsoft YaHei', sans-serif;
		font-size: 48px;
		color: #459fc9;
		white-space: nowrap;
	}

	.text-input {
		flex: 1;
		height: 96px;
		/* border: 2px solid #999; */
		/* border-radius: 20px; */
		padding: 0 20px;
		font-size: 48px;
		/* background-color: rgba(255, 255, 255, 0.8); */
		outline: none;
	}

	/* 输入框右侧内容 */
	.input-right {
		font-family: "BoutiqueBitmap9x9_19_R", 'Microsoft YaHei', sans-serif;
		font-size: 48px;
		color: #333;
		white-space: nowrap;
	}

	/* 注册链接样式 */
	.register-link {
		margin-top: 20px;
		font-family: "BoutiqueBitmap9x9_19_R", 'Microsoft YaHei', sans-serif;
		font-size: 36px;
		color: #006080;
		cursor: pointer;
		/* text-decoration: underline; */
	}

	.hint-text {
		/* margin-top: 15px; */
		/* height: 28px; */
		font-size: 28px;
		color: #FFF;
		text-align: center;
	}

	/* 确保页面边缘没有边距 */
	page {
		margin: 0;
		padding: 0;
	}
</style>